import { StatusBar } from 'expo-status-bar';
import { Animated, Button, Easing, StyleSheet, Text, View, useAnimatedValue } from 'react-native';
import ZhLogin from './pages/ZhLogin';

export default function App() {
  let num = useAnimatedValue(0)    //动画相关的初始化状态变量
  let bgc = num.interpolate({//对动画变量进行插值映射
    inputRange:[0,0.5,1],      //输入值的范围
    outputRange:['#f00','#00f','#0f0'] //映射后的输出值的范围
  })
  return (
    <View style={{ gap: 20, margin: 50 }}>
      <Button title='由红色渐变到绿色' onPress={() => {
        Animated.timing(num, {
          toValue: 1,
          duration: 2000,
          useNativeDriver: true,
        }).start()
      }} />
      <Button title='由绿色渐变回红色' onPress={() => {
        Animated.timing(num, {
          toValue: 0,
          duration: 2000,
          useNativeDriver:true, 
        }).start()
      }} />
      {/* 一个可以产生动画的组件 */}
      <Animated.View style={[ss.box, { backgroundColor:bgc}]}>
        <Text>动画目标元素</Text>
      </Animated.View>
    </View>

  );
}

const ss = StyleSheet.create({
  box: {
    backgroundColor: '#090',
    width: 200,
    height: 100,
  },
});
